const chartLayoutStore = {
  namespaced: true,
  state: {
    // 图层控制
    layers: true,
    // 图表组件
    charts: true,
    // 详情设置（收缩为true）
    details: true,
    // 组件列表展示类型（默认单列）
    chartType: "single",
    // 图层列表展示类型（默认缩略图）
    layerType: "thumbnail",
    leftWidth: "280px",
    rightWidth: "280px",
  },
  mutations: {
    SET_LAYOUT: (state, payload) => {
      const { key, val } = payload;
      state[key] = val;
      switch (key) {
        case "layers":
          break;
        case "charts":
          state.leftWidth = val ? "458px" : "60px";
          break;
        case "details":
          state.rightWidth = val ? "280px" : "0px";
          break;
        default:
          break;
      }
    },
    SET_LEFTWIDTH: (state, val) => {
      state.leftWidth = val;
    },
    SET_RIGHTWIDTH: (state, val) => {
      state.rightWidth = val;
    },
    SET_CHART_TYPE: (state, val) => {
      state.chartType = val;
    },
    SET_LAYER_TYPE: (state, val) => {
      state.layerType = val;
    },
  },
  getters: {
    layers: (state) => state.layers,
    charts: (state) => state.charts,
    details: (state) => state.details,
    leftWidth: (state) => state.leftWidth,
    rightWidth: (state) => state.rightWidth,
    chartType: (state) => state.chartType,
    layerType: (state) => state.layerType,
  },
};

export default chartLayoutStore;
